<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="/static/css/register.css">

    <!-- 引入jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <style>
        .account{
            width: 600px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div class="account">
    <h1>注册</h1>
    <form>
        {%for field in form%}
        <div class="form-group">
            <label for="{{field.id_for_label}}">{{field.label}}</label>
            {% if field.name == 'code' %}
            <div class="input-group">
                {{ field }}
                <span class="input-group-btn">
                    <button id="get_code" type="button" class="btn btn-primary">获取验证码</button>
                </span>
            </div>
            {% else %}
            {{ field }}
            {% endif %}
        </div>
        {% endfor %}
        <script>
            $(function() {
                $('#get_code').click(function() {
                    // 这里添加发送验证码的逻辑
                    $.get('/app01/send_sms?tpl=register', function(res) {
                        alert(res);
                    });
                });
            });
        </script>
    <button type="submit">注册</button>
    </form>
    
</div>

   


</body>
</html>